<template>
  <view class="container-wrap" :style="{ height: currentHeight }">
    <view class="title">
      <view @click="isFullScreenFn">往来款项</view>
      <view style="width: 180px">
        <uni-select v-model="selectValue" dataKey="name" dataValue="value" :clear="false" :localdata="selectList"
          @change="conditionChange"></uni-select>
      </view>
    </view>
    <view v-if="['1', '2', '3'].includes(selectValue)" class="echart-wrap">
      <view class="table-box">
        <uni-table stripe emptyText="暂无数据">
          <uni-tr>
            <uni-th v-for="(column, index) in columns" :align="column.align" :width="column.width" :key="index">{{
              column.title }}</uni-th>
          </uni-tr>
          <uni-tr v-for="(data, index) in dataSource" :key="index">
            <uni-td align="center">
              <image v-if="current === 1 && index === 0" :src="rankOne" style="width: 20px; height: 20px"></image>
              <image v-if="current === 1 && index === 1" :src="rankTwo" style="width: 20px; height: 20px"></image>
              <image v-if="current === 1 && index === 2" :src="rankThere" style="width: 20px; height: 20px"></image>
              <text v-if="(current === 1 && index > 2) || current > 1">{{
                (current - 1) * 5 + index + 1
                }}</text>
            </uni-td>
            <uni-td>{{ data.businessAbbreviation }}</uni-td>
            <uni-td>
              <view style="text-align: center">{{
                data.finalAccountBalance
                }}</view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view class="pagination-box">
        <uni-pagination v-model="current" :pageSize="5" :total="total" @change="pageChange" />
      </view>
    </view>
    <view v-if="selectValue === '4'" class="place-wrap">
      <view class="place-wrap flex-direction">
        <img :src="placePath" alt="" style="width: 200px; height: 110px" />
        <text>正在升级中，敬请期待...</text>
      </view>
    </view>
    <uni-loading v-show="showLoading"></uni-loading>
  </view>
</template>
<script>
  import config from '@/config';
  import { getCurrentAccount } from '@/api/dashboard';
  import { interactionTypeList } from './baseData.js';
  import uniLoading from '../common/uni-loading/uni-loading';
  export default {
    components: {
      uniLoading
    },
    props: {
      currentHeight: {
        type: String,
        default: '100vh'
      }
    },
    computed: {
      rankOne() {
        return config.baseImgUrl + '/rank-1.png';
      },
      rankTwo() {
        return config.baseImgUrl + '/rank-2.png';
      },
      rankThere() {
        return config.baseImgUrl + '/rank-3.png';
      },
      placePath() {
        return config.baseImgUrl + '/up-place.png';
      }
    },
    data() {
      return {
        showLoading: false,
        current: 1,
        selectValue: '1',
        selectList: interactionTypeList,
        columns: [
          {
            title: '排名',
            width: '60px',
            align: 'center'
          },
          {
            value: 'businessAbbreviation',
            title: '供应商名称'
          },
          {
            value: 'finalAccountBalance',
            width: '100px',
            align: 'center',
            title: '余额/万元'
          }
        ],
        total: 0,
        dataSource: [],
        cacheSource: []
      };
    },
    mounted() {
      this.getCurrentAccountFn();
    },
    methods: {
      pageChange(page) {
        this.current = page.current;
        this.dataSource = this.cacheSource.slice(
          (this.current - 1) * 5,
          (this.current - 1) * 5 + 5
        );
      },
      async getCurrentAccountFn() {
        this.showLoading = true;
        const data = { amountType: this.selectValue };
        const res = await getCurrentAccount(data);
        if (res.code === 0) {
          this.cacheSource = res?.data || [];
          this.total = this.cacheSource.length || 0;
          this.dataSource = this.cacheSource.slice(
            (this.current - 1) * 5,
            (this.current - 1) * 5 + 5
          );
        }
        this.showLoading = false;
      },
      conditionChange() {
        this.current = 1;
        this.dataSource = [];
        this.cacheSource = [];
        if (this.selectValue === '1') {
          this.columns[2].title = '余额/万元';
          this.columns[2].align = 'center';
        } else {
          this.columns[2].title = '账期/天';
          this.columns[2].align = 'center';
        }
        this.getCurrentAccountFn();
      },
      isFullScreenFn() {
        if (this.currentHeight === '100vh') {
          return;
        }
        this.$tab.navigateTo('/packageA/pages/purchaseTransport/dealingPay');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .container-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px 10px;
    background-color: #ffffff;
    border-radius: 8px;

    .title {
      display: flex;
      font-size: 14px;
      color: #000000;
      font-weight: 600;
      padding-bottom: 11px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
    }

    .echart-wrap {
      flex: 1;
      height: 0;
      padding: 10px 0;

      .table-box {
        overflow-y: auto;
        height: calc(100% - 20px);

        image {
          position: relative;
          top: 4px;
        }
      }

      .pagination-box {
        margin-top: 10px;
      }
    }

    .place-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;
    }

    .flex {
      display: flex;
    }

    .flex-direction {
      flex-direction: column;
    }
  }
</style>